<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #cvs {
        border: 1px solid #ccc;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 20px auto;
      }
    </style>
  </head>

  <body>
    <canvas id="cvs" width="600" height="600"></canvas>
  </body>
  <script>
    //获取dom
    const cvsDOM = document.querySelector("#cvs");
    //生成canvas对象
    const context = cvsDOM.getContext("2d");
    setInterval(() => {
      //保存绘图状态
      context.save();
      
      context.clearRect(0, 0, cvsDOM.width, cvsDOM.height);
      //设置画布中心点
      context.translate(300, 300);

      context.save();

      //绘制大圆
      context.beginPath();
      context.lineWidth = 8;
      context.arc(0, 0, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
      context.stroke();

      //绘制小圆
      context.beginPath();
      context.lineWidth = 2;
      context.arc(0, 0, 10, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
      context.stroke();

      //小时刻度
      context.lineWidth = 6;
      for (let i = 0; i < 12; i++) {
        context.rotate((Math.PI / 180) * (360 / 12));
        context.moveTo(130, 0);
        context.lineTo(150, 0);
        context.stroke();
      }

      context.restore();
      context.save();

      context.lineWidth = 1;
      for (let i = 0; i < 60; i++) {
        context.rotate((Math.PI / 180) * (360 / 60));
        context.moveTo(135, 0);
        context.lineTo(150, 0);
        context.stroke();
      }

      context.restore();
      context.save();

      //实例化日期对象
      const d = new Date();
      const hour = d.getHours() % 12;
      const minute = d.getMinutes();
      const second = d.getSeconds();

      //绘制时针
      context.beginPath();
      context.lineWidth = 6;
      context.rotate(
        (Math.PI / 180) * (360 / 12) * hour +
          (Math.PI / 180) * (360 / 12) * (minute / 60) -
          Math.PI / 2
      );
      context.moveTo(-18, 0);
      context.lineTo(80, 0);
      context.stroke();

      context.restore();
      context.save();

      //绘制分针
      context.beginPath();
      context.lineWidth = 4;
      context.strokeStyle = "#000";

      context.rotate(
        (Math.PI / 180) * (360 / 60) * minute +
          (Math.PI / 180) * (360 / 60) * (second / 60) -
          Math.PI / 2
      );

      context.moveTo(-18, 0);
      context.lineTo(100, 0);
      context.stroke();

      context.restore();
      context.save();
      //绘制秒针
      context.beginPath();
      context.lineWidth = 2;
      context.strokeStyle = "#000";
      context.rotate((Math.PI / 180) * (360 / 60) * second - Math.PI / 2);
      context.moveTo(-18, 0);
      context.lineTo(100, 0);
      context.stroke();

      context.restore();
      context.save();

      context.restore();
      context.restore();
    }, 1000);
  </script>
</html>
